﻿@{
    ViewData["Title"] = "主页";
}

<style>
    table tbody tr td {
        vertical-align: middle !important;
    }
</style>
<div class="container">
    <div class="py-5 text-center">
        <h2>国际象棋成绩比赛成绩查询</h2>
        <p class="lead">本查询的数据为源自网络的非官方。数据可能存在不完整、不准确、不及时等问题。<br />本工具仅查询的结果仅供参考。</p>
    </div>

    <div class="row">
        <div class="col-md-8 order-md-1">
            <div class="mb-3">
                <label for="address">选手姓名</label>
                <input type="text" class="form-control" id="myname" placeholder="示例：李诗敏" required>
            </div>
            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit" onclick="onquery();">查询</button>
        </div>
    </div>

    <div id="container">
        @*<hr />
            <table class="table table-bordered table-condensed table-striped" >
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>比赛</th>
                        <th>组别</th>
                        <th>名次</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>201903</td>
                        <td>“蓝帽子杯”2019春季厦门市国际象棋等级赛</td>
                        <td>男子A组</td>
                        <td>1</td>
                    </tr>
                </tbody>
            </table>*@
    </div>
   
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>提示</h3>
                </div>
                <div class="modal-body">
                    <p>确定要关闭警告框信息？</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div> 

    <script type="text/javascript">
        function onquery() {
            var resultdata = [];
            $.ajax({
                url: "/ChessQuery/Query",
                data: {
                    name: $("#myname")[0].value
                },
                success: function (data) {
                    resultdata = data;
                    var container = document.getElementById("container");
                    container.innerHTML = "";
                    if (resultdata.length > 0) {
                        var json_hr = document.createElement("hr");
                        var json_table = document.createElement("table");
                        var json_tr = document.createElement("tr");
                        var json_th = document.createElement("th");
                        var json_txt = document.createTextNode("");
                        var json_thread = document.createElement("thead");
                        var json_tbody = document.createElement("tbody");
                        var json_td = document.createElement("td");

                        container.appendChild(json_hr);
                        json_table.setAttribute("class", "table table-bordered table-condensed table-striped");
                        json_th = document.createElement("th");
                        json_txt = document.createTextNode("日期");
                        json_th.appendChild(json_txt);
                        json_tr.appendChild(json_th);

                        json_th = document.createElement("th");
                        json_txt = document.createTextNode("比赛");
                        json_th.appendChild(json_txt);
                        json_tr.appendChild(json_th);

                        json_th = document.createElement("th");
                        json_txt = document.createTextNode("组别");
                        json_th.appendChild(json_txt);
                        json_tr.appendChild(json_th);

                        json_th = document.createElement("th");
                        json_txt = document.createTextNode("名次");
                        json_th.appendChild(json_txt);
                        json_tr.appendChild(json_th);

                        json_thread.appendChild(json_tr);
                        json_table.appendChild(json_thread);

                        // 表格内容
                        for (var i = 0; i < resultdata.length; i++) {
                            json_tr = document.createElement("tr");
                            json_td = document.createElement("td");
                            json_txt = document.createTextNode(resultdata[i].yearmonth);
                            json_td.appendChild(json_txt);
                            json_tr.appendChild(json_td);

                            json_td = document.createElement("td");
                            json_txt = document.createTextNode(resultdata[i].matchName);
                            json_td.appendChild(json_txt);
                            json_tr.appendChild(json_td);

                            json_td = document.createElement("td");
                            json_txt = document.createTextNode(resultdata[i].levelName);
                            json_td.appendChild(json_txt);
                            json_tr.appendChild(json_td);

                            json_td = document.createElement("td");
                            json_txt = document.createTextNode(resultdata[i].ranking);
                            json_td.appendChild(json_txt);
                            json_tr.appendChild(json_td);

                            json_tbody.appendChild(json_tr);
                        }

                        json_table.appendChild(json_tbody);
                        container.appendChild(json_table);
                    }
                    else {
                        alert("没有数据");
                    }
                },
                async: false
            });
        }
    </script>
</div>
